<script lang="ts" setup>
import reqApis from "../../../req/reqApis.js";
import {showToast} from 'vant';
import { ref, reactive, nextTick, onMounted } from 'vue';

import { useRouter } from 'vue-router';

const router = useRouter();

const emit = defineEmits(['closePacketFn']);

const props = defineProps({
  configCode: {
    type: String,
    default: ""
  }
});

const currentData = ref<any>({
  totalMoney: 0,
  packetNum: 10,
  packetText: "",
  showModel: false,
  btnBool: true,
});

const closePacketFn = () => {
  emit("closePacketFn");
};
const packetEndFn = () => {
  currentData.value.packetBool = false;
  currentData.value.showModel = true;
  currentData.value.packetText = '总共抢到了' + currentData.value.totalMoney.toFixed(2);
  currentData.value.btnBool = false;
};
const closeFn = () => {
  currentData.value.showModel = false;
};
const getPacket = () => {
  let params = {
      redPacketConfigCode: props.configCode
  }
  reqApis.getRedPacketReqApi(params).then(res => {
    console.log("res", res.data);
    currentData.value.packetText = res.data.msg;
    currentData.value.totalMoney += Number(res.data.price);
    
  }).catch(err => {
    console.log("err", err.data);
      currentData.value.packetText = err.data.msg;
  })
  currentData.value.showModel = true;

};
const ranNum = (min:any, max:any) => {
    return Math.ceil(Math.random() * (max - min) + min);
};
const leftRemFn = () => {
  let leftRem = ranNum(10, 355) * 0.01;
  return leftRem + 'rem'; 
};
const delayFn = () => {
  let delay = ranNum(0, 100) / 10;
  return delay+"s";
};

</script>

<template>
  <section  class="redPacketUtil" id="packetEndFn"  ref="redPacketWrap">
    <div class="close" @click="packetEndFn()"></div>
    <img class="redPacket" 
    @click="getPacket()"
    v-for="(item, index) in currentData.packetNum" :key="index" 
    :style="{animationDelay: delayFn(), left: leftRemFn(), animationPlayState: currentData.showModel?'paused':'running'}"
    src="../../../assets/images/petal.jpg" alt="">
    <div class="model" ref="model" :style="{display: currentData.showModel?'block':'none'}">
        <div class="hb">
            <div class="text">{{currentData.packetText}}</div>
            <div class="btn" v-if="currentData.btnBool" @click="closeFn()">继续抢红包</div>
            <div class="btn" v-if="!currentData.btnBool" @click="closePacketFn">确定</div>
        </div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.redPacketUtil {
  background: black;
  opacity: 0.8;
  position: absolute;
  width: 3.75rem;
  height: 100%;
  .close {
    width: .4rem;
    height: .4rem;
    position: absolute;
    background: url("../../../assets/images/clear-icon-1.png") no-repeat center;
    background-size: cover;
    right:0;
  }
  .model {
    .hb {
       width: 3rem;
        height: 4.5rem;
        border-radius: .2rem;
        background-color: #e7223e;
        color: #fad755;
        position: fixed;
        left: 0.37rem;
        top: 1.5rem;
        font-size: .3rem;
        font-weight: 900;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .btn {
          background-color: #fad755;
          color: #e7223e;
          font-size: 18px;
          margin-top: 10px;
          padding: 10px;
          border: none;
          outline: none;
          cursor: pointer;
        }
    }
  }
  .redPacket {
    width: 0.3rem;
    
  }
  img {
        position: absolute;
        transform: translateY(-100%);
        /*下落动画*/
        animation: dropDowm 8s forwards;
        /*旋转动画*/
    }
    @keyframes dropDowm {
        0% {
            top: 0px;
            transform: translateY(-100%) rotate(0deg);
        }

        100% {
            top: 110%;
            transform: translateY(0%) rotate(360deg);
        }
    }
}

</style>

